// import { showTimeNotSecond } from '@/libs/utils';
export default {
    name: 'cardRender',
    functional: true,
    inject: ['tableRoot'],
    props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
            type: Object,
            default: null
        },
        showType: String
    },
    render: (h, { props, listeners, data, injections }) => {
        const {column,row,index,showType} = props;
        const {type:cType,width:cWidth,setPath,on,tooltip,renderFun:render,fun} = column;
        const params = {
            row: {...row,_index:index},
            index,
            column,
        };
        const getCellContent = data.attrs.getCellContent;
        const notDisabled = (!column.disabled || !column.disabled(row));
        const vContent = getCellContent(column, row);
        const hasContent = vContent != '-';
        const needShow = hasContent && showType !== 'content';
        function getColor(column, row) {
            return typeof column.setColor === 'function'
                ? column.setColor(row[column.key], row)
                : column.setColor
                ? column.setColor
                : '';
        }
        function getVType(){
            if(cType === 'link' && setPath && notDisabled && hasContent && showType !== 'content'){
                return 'a'
            }else if(cType === 'Tag'){
                return 'Tag'
            }else{
                return 'span'
            }
        }
        const color = getColor(column, row);
        const vStyle = {
            // width: cWidth ? cWidth +'px' : '', 
            'max-width': '100%',
            color: showType !== 'content' && hasContent ? color : '',
        }
        if (cType === 'render') {
            let renderContent = render(h,params)
            if(!renderContent){
                return h('span','')
            }
            if(renderContent.componentOptions){
                return render(h,params)
                if(renderContent.componentOptions.tag === 'FormItem'){
                    return render(h,params)
                }
                return h('span',{class:tooltip && showType !== 'content' ? 'text-ellipsis' : '',style:vStyle},[renderContent])
            }else{
                let { style:rStyle={},class:rClass='',...data} = renderContent.data || {};
                // debugger
                if(tooltip && showType !== 'content'){
                    if(typeof rClass === 'string'){
                        rClass = `${rClass} text-ellipsis`
                    }else if(Array.isArray(rClass)){
                        rClass = [...rClass,'text-ellipsis']
                    }else{
                        rClass = {...rClass,'text-ellipsis':true}
                    }
                }
                rStyle = {...vStyle,...rStyle}
                return h(renderContent.tag,{
                    ...data,
                    class:rClass,
                    style:rStyle,
                    on:{
                        ...data.on,
                        ...listeners
                    }
                },renderContent.children)
            }
        } else if (cType === 'slot') {
            return h(
                'div',
                injections.tableRoot.$scopedSlots[column.slot]({
                    row: row,
                    column: column,
                    index: index
                })
            );
        } else {
            const vClass = {
                'text-ellipsis': (tooltip || cType === 'Html') && needShow ? true : false,
                'pointer': (on || fun || column.preFun) && notDisabled && needShow ? true : false,
                'html-ellipsis': cType === 'Html' && needShow ? true : false,
                'pre-wrap': showType === 'content' ? true : false,
                'pre': showType !== 'content' && cType !== 'Tag'? true : false,
                'blue-color':(column.type === 'Html' || (column.type === 'link' && notDisabled)) && needShow ? true : false
            }
            let setOn = {};
            if(!(on && on.click) && fun){
                setOn = {
                    click:(e) => {
                        if(notDisabled){
                            fun(row,e);
                        }
                    }
                }
            }
            if(on){
                for(let key in on){
                    setOn[key] = (e) => {
                        if(notDisabled){
                            on[key](row,e);
                        }
                    }
                }
            }
            let vType = getVType();
            let vAttrs = {}
            let vProps = {}
            let domProps = {}
            if(cType === 'link'){
                vAttrs.href = (setPath && setPath(row)) || 'javascript:void(0)'
                // vAttrs.target = '_blank'
            }else if(cType === 'Tag'){
                vProps = {
                    type: 'border',
                    color: color || 'blue'
                }
            }else if(cType === 'Html'){
                domProps = {
                    innerHTML: showType === 'content' && column.preFun ? '点击查看详情' : vContent.replace(/\<br\>/g, '')
                }
                if(showType !== 'content' && hasContent){
                    if(column.preFun){
                        setOn.click = (e) => {
                            column.preFun(vContent,e,column.title)
                        }
                    }
                }
            }
            let config = {
                class: vClass,
                style: vStyle,
                attrs: vAttrs,
                domProps:domProps,
                props:vProps,
                on: {
                    ...setOn,
                    ...listeners
                }
            }
            if(vType === 'Tag'){
                config.nativeOn = setOn;
            }
            return h(
                vType,
                config,
                showType === 'content'&& column.tooltipKey ? row[column.tooltipKey] : vContent
            );
        } 
    }
};
